<template>
  <div class="operation-overview-wrapper">
    <div class="part">
      <div class="part-item part-item2">
        <tabItem1
          v-for="(item, index) of topConfig"
          :key="index"
          :config="item"
          :value="topData[item.value]"
        />
      </div>
      <div class="part-item">
        <div class="title">园区建筑密度排行</div>
        <div class="content">
          <tabItem :dataList="buildingRankInfo" />
        </div>
      </div>
      <div class="part-item">
        <div class="title">园区绿地率排行</div>
        <div class="content">
          <tabItem :dataList="groundRankInfo" />
        </div>
      </div>
      <div class="part-item">
        <div class="title">园区出租率排行</div>
        <div class="content">
          <tabItem :dataList="rentRankInfo" />
        </div>
      </div>
    </div>
    <div class="part part1">
      <div class="part-item part-item1">
        <div class="part-item-top">
          <tabItem2
            v-for="(item, index) of bottomConfig"
            :key="index"
            :config="item"
            :value="bottomData[item.value]"
          />
        </div>
        <div class="part-item-left">
          <tabItem2
            v-for="(item, index) of bottomConfig1"
            :key="index"
            :config="item"
            :value="bottomData[item.value]"
          />
        </div>
        <div class="part-item-right">
          <div class="title">楼宇出租面积占比</div>
          <div class="part-item-right-chart">
            <echartDiv :options="optionCZMJ" />
          </div>
        </div>
      </div>
      <div class="part-item part-item3">
        <div class="title">楼宇入驻企业数排行</div>
        <div class="content1">
          <el-table
            :data="companyRankInfo"
            :header-cell-style="{
              background: '#F2F6FB ',
              color: ' #6B767D'
            }"
            stripe
            height="100%"
          >
            <el-table-column
              label="排名"
              align="center"
              show-overflow-tooltip
              width="100"
            >
              <template slot-scope="scope">
                <div
                  class="list-index"
                  :class="{
                    'list-index-first': scope.$index === 0,
                    'list-index-second': scope.$index === 1,
                    'list-index-third': scope.$index === 2
                  }"
                >
                  {{ scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="楼宇名称"
              prop="name"
              show-overflow-tooltip
            />
            <el-table-column
              label="楼栋数(栋)"
              prop="floor"
              show-overflow-tooltip
              width="160"
            />
            <el-table-column
              label="入驻企业数(个)"
              prop="companyTotal"
              show-overflow-tooltip
              width="160"
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartDiv from '@/components/echart/index'
import tabItem from './tabItem.vue'
import tabItem1 from './tabItem1.vue'
import tabItem2 from './tabItem2.vue'
import {
  queryPark,
  queryBuild
} from '@/api/wisdomOperationOverview'
export default {
  components: {
    echartDiv,
    tabItem,
    tabItem1,
    tabItem2
  },
  data() {
    return {
      // 园区
      topConfig: [
        {
          label: '园区总数',
          value: 'total',
          unit: '个',
          icon: require('@/assets/img/overview/yy-top-icon1.png'),
          bg: ''
        },
        {
          label: '园区总面积',
          value: 'areaTotal',
          unit: '平方米',
          icon: require('@/assets/img/overview/yy-top-icon2.png'),
          bg: ''
        },
        {
          label: '停车场数量',
          value: 'parkingTotal',
          unit: '个',
          icon: require('@/assets/img/overview/yy-top-icon3.png'),
          bg: ''
        }
      ],
      topData: {
        total: 0,
        areaTotal: 0,
        parkingTotal: 0
      },
      // 建筑密度
      buildingRankInfo: [],
      // 绿地率
      groundRankInfo: [],
      // 出租率
      rentRankInfo: [],

      // 楼宇
      bottomConfig: [
        {
          label: '楼宇总数',
          value: 'total',
          unit: '个',
          icon: require('@/assets/img/overview/yy-bottom-icon1.png'),
          bg: ''
        },
        {
          label: '入驻企业总数',
          value: 'companyTotal',
          unit: '个',
          icon: require('@/assets/img/overview/yy-bottom-icon2.png'),
          bg: ''
        }
      ],
      bottomConfig1: [
        {
          label: '建筑总面积',
          value: 'areaTotal',
          unit: '平方米',
          icon: require('@/assets/img/overview/yy-bottom-icon3.png'),
          bg: '#54B3F1'
        },
        {
          label: '停车场总数',
          value: 'parkingTotal',
          unit: '个',
          icon: require('@/assets/img/overview/yy-bottom-icon4.png'),
          bg: '#54B3F1'
        }
      ],
      bottomData: {
        total: 0,
        companyTotal: 0,
        areaTotal: 0,
        parkingTotal: 0
      },
      // 出租面积占比
      optionCZMJ: null,
      // 入驻企业数排行
      companyRankInfo: []
    }
  },
  mounted() {
    this.getStatisticsYQ()
    this.getStatisticsLY()
  },
  methods: {
    // 园区
    getStatisticsYQ() {
      queryPark().then((res) => {
        if (res.success) {
          // 顶部
          this.topData = {
            total: res.data.total || 0,
            areaTotal: res.data.areaTotal || 0,
            parkingTotal: res.data.parkingTotal || 0
          }
          // 建筑密度
          this.buildingRankInfo =
            res.data.buildingRankInfo || []
          // 绿地率
          this.groundRankInfo =
            res.data.groundRankInfo || []
          // 出租率
          this.rentRankInfo = res.data.rentRankInfo || []
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 楼宇
    getStatisticsLY() {
      queryBuild().then((res) => {
        if (res.success) {
          // 顶部
          this.bottomData = {
            total: res.data.total || 0,
            companyTotal: res.data.companyTotal || 0,
            areaTotal: res.data.areaTotal || 0,
            parkingTotal: res.data.parkingTotal || 0
          }
          // 出租面积
          this.optionCZMJ = this.getChartDataPie([
            {
              label: '已出租',
              num: res.data.areaRentTotal || 0
            },
            {
              label: '未出租',
              num: res.data.areaUnRentTotal || 0
            }
          ])
          // 入驻企业
          this.companyRankInfo =
            res.data.companyRankInfo || []
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 出租占比
    getChartDataPie(data) {
      let option = {
        color: ['#EFD0A4', '#00C2C5'],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: true,
          right: '30',
          top: 'center',
          orient: 'vertical',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 18,
          icon: 'circle',
          formatter: (name) => {
            if (data.length) {
              const item = data.filter(
                (item) => item.label === name
              )[0]
              return `{name|${name} }\n{value| ${item.num}} {unit| 平方米}`
            }
          },
          textStyle: {
            align: 'left',
            verticalAlign: 'middle',
            rich: {
              name: {
                color: '#4c565c',
                fontSize: 14,
                lineHeight: 24,
                padding: [0, 0, 0, 5]
              },
              value: {
                color: '#000000',
                fontSize: 16,
                fontWeight: 500,
                lineHeight: 24
              },
              unit: {
                color: '#4C565C',
                fontSize: 14,
                lineHeight: 24
              }
            }
          }
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: ['47%', '55%'],
            center: ['25%', '50%'],
            hoverAnimation: false,
            z: 10,
            data: [],
            label: {
              show: false,
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: false
            },
            emphasis: {
              labelLine: {
                show: true
              }
            }
          },
          {
            type: 'pie',
            radius: ['41%', '47%'],
            center: ['25%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
      }
      const seriesData1 = []
      const seriesData2 = []
      for (let index = 0; index < data.length; ++index) {
        const item = data[index]
        seriesData1.push({
          value: item.num,
          name: item.label
          // itemStyle: {
          //   color: color[index]
          // }
        })
        seriesData2.push({
          value: item.num,
          name: item.label,
          itemStyle: {
            // color: color[index],
            opacity: 0.4
          }
        })
      }

      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    }
  }
}
</script>

<style lang="scss">
.operation-overview-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  .part {
    width: 100%;
    height: calc(47.23% - 18px);
    background-color: #fff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    &-item {
      width: 25%;
      height: 100%;
      border-right: 1px solid #f1f1f1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      &:last-child {
        border-right: none;
      }
      &-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 10px 20px 20px 20px;
        border-bottom: 1px solid #f1f1f1;
      }
      &-left {
        width: 50%;
        height: calc(100% - 150px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px 10px 20px 20px;
        .op-tabItem2 {
          width: 100% !important;
        }
      }
      &-right {
        width: 50%;
        height: calc(100% - 150px);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 10px 0 0 0;
        .title {
          border-bottom: none;
        }
        &-chart {
          width: 100%;
          height: calc(100% - 54px);
        }
      }
    }
    &-item1 {
      width: 50%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    &-item3 {
      width: 50%;
      .el-table .el-table__cell {
        padding: 0;
      }
      .el-table th.el-table__cell > .cell {
        padding: 10px 0;
      }
      .el-table--striped
        .el-table__body
        tr.el-table__row--striped
        td.el-table__cell {
        background: #f2f6fb;
      }
      .list-index {
        width: 40px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        font-family: DIN;
        font-weight: bold;
        background: url('~@/assets/img/overview/kc-right-rank4.png')
          no-repeat;
        background-size: 100% 100%;
        color: #a8bad2;
      }
      .list-index-first {
        background: url('~@/assets/img/overview/kc-right-rank1.png')
          no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
      }
      .list-index-second {
        background: url('~@/assets/img/overview/kc-right-rank2.png')
          no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
      }
      .list-index-third {
        background: url('~@/assets/img/overview/kc-right-rank3.png')
          no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
      }
    }
    &-item2 {
      box-sizing: border-box;
      padding: 20px 20px 40px 20px;
    }
  }
  .part1 {
    width: 100%;
    height: 52.77%;
  }
  .title {
    width: 100%;
    height: 54px;
    color: #4c565c;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    box-sizing: border-box;
    padding: 0 0 0 35px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      position: absolute;
      top: calc(50% - 8px);
      left: 24px;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 54px);
    box-sizing: border-box;
    padding: 13px;
  }
  .content1 {
    width: 100%;
    height: calc(100% - 54px);
    box-sizing: border-box;
    padding: 25px;
  }
}
</style>
